<template>
    <div>
        <div class="tabNav"><img src="../assets/img/sidebar1.png" />首页
            <b>/<i style="font-size: 15px;margin-right: 5px;" class="el-icon-lx-people"></i>个体户办理</b>
            <el-input
                placeholder="请输入灵活用工平台名称进行搜索"
                suffix-icon="el-icon-search"
                v-model="input1">
            </el-input>
            <em><i class="el-icon-s-data" data-v-7efbb0b8="" style="font-size: 14px; margin-right: 5px;"></i>服务者数量：239,109</em>
        </div>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-card class="cardTits cardTitss cardTitee cardTitcc" shadow="hover">
                    <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                        width="50">
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="姓名">
                        </el-table-column>
                        <el-table-column
                        prop="sfzh"
                        label="身份证号">
                        </el-table-column>
                        <el-table-column
                        prop="tel"
                        label="联系电话">
                        </el-table-column>
                        <el-table-column
                        prop="shzt"
                        label="审核状态">
                        </el-table-column>
                        <el-table-column
                        prop="beiz"
                        label="是否办理个体">
                        </el-table-column>
                        <el-table-column
                        prop="caozuo"
                        label="操作"
                        width="70"
                        class-name="editor">
                        <router-link to="/serviceDel">
                        <el-button type="text">详情</el-button>
                        </router-link>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[1, 3, 6]"
                    :page-size="6"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="50">
                    </el-pagination>
                </el-card>
            </el-col>
        </el-row>
        
    </div>
</template>

<script>
export default {
    name: "dashboard",
    data() {
        return {
            currentPage4: 50,
            tableData: [{
                end: "2021-02-21",
                xydm: '911201117581366498',
                name: '王小明',
                sfzh: '911201117581366498',
                tel: '13800000000',
                shzt: '未审核',
                beiz: '无'
            }, {
                end: "2021-02-21",
                xydm: '911201117581366498',
                name: '王小明',
                sfzh: '911201117581366498',
                tel: '13800000000',
                shzt: '已驳回',
                beiz: '信息异常'
            }, {
                end: "2021-02-21",
                xydm: '911201117581366498',
                name: '王小明',
                sfzh: '911201117581366498',
                tel: '13800000000',
                shzt: '审核通过',
                beiz: '无'
            }, {
                end: "2021-02-21",
                xydm: '911201117581366498',
                name: '王小明',
                sfzh: '911201117581366498',
                tel: '13800000000',
                shzt: '审核通过',
                beiz: '无'
            }, {
                end: "2021-02-21",
                xydm: '911201117581366498',
                name: '王小明',
                sfzh: '911201117581366498',
                tel: '13800000000',
                shzt: '审核通过',
                beiz: '无'
            },{
                end: "2021-02-21",
                xydm: '911201117581366498',
                name: '王小明',
                sfzh: '911201117581366498',
                tel: '13800000000',
                 shzt: '已驳回',
                beiz: '信息异常'
            }, {
                end: "2021-02-21",
                xydm: '911201117581366498',
                name: '王小明',
                sfzh: '911201117581366498',
                tel: '13800000000',
                shzt: '审核通过',
                beiz: '无'
            }, {
                end: "2021-02-21",
                xydm: '911201117581366498',
                name: '王小明',
                sfzh: '911201117581366498',
                tel: '13800000000',
                shzt: '审核通过',
                beiz: '无'
            }, {
                end: "2021-02-21",
                xydm: '911201117581366498',
                name: '王小明',
                sfzh: '911201117581366498',
                tel: '13800000000',
                shzt: '审核通过',
                beiz: '无'
            },{
                end: "2021-02-21",
                xydm: '911201117581366498',
                name: '王小明',
                sfzh: '911201117581366498',
                tel: '13800000000',
                shzt: '审核通过',
                beiz: '无'
            }],
        };
    },
    components: {
    },
    computed: {
        role() {
            return this.name === "admin" ? "超级管理员" : "普通用户";
        }
    },

    methods: {
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      open() {
        this.$alert('<img src="http://111.jingdong.applinzi.com/zh/images/yyzz.png" />', {
          dangerouslyUseHTMLString: true
        });
      },
    }
};
</script>
<style scoped>
.tabNav {
    font-size: 14px;
    color: #0A2E6A;
    margin-bottom: 25px;
    text-indent: 5px;
}
.tabNav img {
    position: relative;
    top: 1px;
    left: -5px;
}
.el-input {
    float: right;
    width: 320px;
    position: relative;
    top: -5px;
    line-height: 32px;
}
.cardTit em {
    display: block;
    font-style: normal;
    line-height: 40px;
    margin-top: -15px;
    border-bottom: 1px solid #E0EAF6;
    font-weight: normal;
    font-size: 12px;
    color: #6C8198;
    margin-bottom: 15px;
}
.cardTit span {
    border-right: 1px solid #E0EAF6;
    margin-right: 10px;
    padding-right: 10px;
}
.cardTitee {
  margin-bottom: 20px;
}
</style>
<style>
.editor .el-button--text {
    transform: scale(.85);
}
.editor .el-table .cell {
    padding-left: 0;
}
.cardTitee .download {
    color: #95A8BE;
    font-size: 12px;
    margin: 15px 20px 15px;
}
.download i {
    color: #326CF0;
}
.cardTits .el-table td.editor {
    color: #326CF0;
    cursor: pointer;
}
.download b {
    color: #326CF0;
    margin: 0 3px;
}
.download span {
    color: #326CF0;
    border: 1px solid #326CF0;
    padding: 3px 7px;
    border-radius: 5px;
    background: #F2F3FE;
    margin: 0 10px 0 50px;
    cursor: pointer;
}
.download em {
    color: #326CF0;
    font-style: normal;
    border-left: 1px solid #999;
    padding-left: 10px;
    cursor: pointer;
}
.el-pager li {
    color: #6C8198;
    font-weight: normal;
    border: 1px solid #EEF4FB;
    border-radius: 5px;
    padding: 0;
    margin: 0 5px;
    height: 30px;
    line-height: 30px;
    min-width: 32px;
}
.el-pager li.active {
    color: #fff;
    cursor: default;
    background: #326CF0;
}
.tabNav .el-input__inner {
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
    border: 0;
}
.tabNav .el-input__inner::placeholder {
    color:#DDEAFA;
}
.tabNav .el-input__suffix {
    right: 10px;
    top: -3px;
    width: 20px;
    left: inherit;
}
.tabNav em {
    display: block;
    font-size: 12px;
    margin: 5px 0 0 -10px;
    font-style: normal;
}
.tabNav b {
    margin-left: 8px;
    text-indent: 10px;
    cursor: pointer;
}
.tabNav b,.tabNav em {
    color: #0A2E6A;
    cursor: pointer;
}
.tabNav b.colors {
  color: #6C8198;
  cursor: initial;
  text-indent: 10px;
  font-weight: normal;
}
.tabNav {
  color: #6C8198;
}
.el-input--prefix .el-input__inner {
    padding-left: 15px;
}
.el-card__body, .el-main {
    padding: 0;
}
.cardTit{
    color: rgba(10, 46, 106, 1);
    line-height: 50px;
    padding-left: 20px;
    font-size: 14px;
    font-weight: bold;
}
.cardTit .el-input__inner {
    width: 120px;
    height: 32px;
    line-height: 32px;
}
.cardTit .el-select {
    float: right;
    margin: 10px 18px 0 0;
}
.cardTit .el-input__suffix {
    top: 5px;
}
.el-pagination {
    text-align: center;
    margin: 25px 0;
}
.cardTit .el-select .el-input .el-select__caret.is-reverse {
    top: -10px;
    position: relative;
}
.cardTits .el-card {
    border-radius: 5px;
}
.cardTitdd .el-card {
    height: auto;
}
.cardTits .el-table td,.cardTits .el-table th {
    padding: 8px 0;
    font-size: 12px;
    color: #6C8198;
}
.cardTits .el-table th>.cell {
    font-weight: normal;
    color: #0A2E6A;
}
.cardTit b {
    float: right;
    font-size: 12px;
    font-weight: normal;
    margin-right: 30px;
    color: #326CF0;
    cursor: pointer;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #326CF0;
    border-color: #326CF0;
}
.infoImg {
    width: 50px;
    border-radius: 100%;
    margin: 15px 15px 15px 30px;
    float: left;
}
.infoTit {
    display: inline-block;
    width: calc(100% - 120px);
    border-bottom: 1px solid #EEF4FB;
    padding-bottom: 20px;
}
.infoTit b {
    color: #0A2E6A;
    font-size: 14px;
    font-weight: normal;
    margin: 20px 0 2px;
    display: block;
}
.infoTit span {
    padding-right: 10px;
    color: #6C8198;
    font-size: 12px;
    border-right: 1px solid #E0EAF6;
}
.infoCon {
    font-size: 12px;
    margin-top: 15px;
}
.infoCon b {
    font-weight: normal;
    width: 50%;
    float: left;
    margin-bottom: 15px;
    color: #0A2E6A;
}
.infoCon em {
    font-style: normal;
    float: left;
    width: 150px;
    text-align: right;
    color: #6C8198;
    margin-right: 5px;
}
.infoCon i {
    display: grid;
    font-style: normal;
    padding-right: 60px;
}
.infoCon b img {
    width: 108px;
    height: 68px;
    border: 1px solid #E0EAF6;
    padding: 10px;
    margin-right: 30px;
    cursor: pointer;
}
.el-message-box {
    width: auto;
    text-align: center;
}
.infoCon strong {
    display: block;
    font-weight: normal;
}
.el-button--text {
    padding: 0;
}
.cardTitcc .el-table thead {
    line-height: 40px;
}
</style>
